<template>
	<div class="common-layout">
		<el-container>
			<!-- Menu -->
		  <el-aside width="200px">
			  <h1 style="font-size: 30px; margin-top: 5%;">XX酒庄</h1>
			  <el-menu
				default-active="1"
				class="el-menu-vertical-demo Fmenu"
				>
				<el-sub-menu index="1" v-if="adminRole!=2">
					<template #title>
						<router-link to="/userManage"><img src="../assets/image/usermanage.jpg"/>用户管理</router-link>
					</template>
					<el-menu-item index="1-1">
						<router-link to="/adminManage">管理员管理</router-link>
					</el-menu-item>
					<el-menu-item index="1-2">
						<router-link to="/userInformation">用户信息管理</router-link>
					</el-menu-item>
				</el-sub-menu>
				<el-menu-item index="2" v-if="adminRole==2">
					<router-link to="/myCenter"><img src="../assets/image/usermanage.jpg" />个人中心</router-link>
				</el-menu-item>
				<el-menu-item index="2" v-if="adminRole!=2">
					<router-link to="/branch"><img src="../assets/image/store.jpg" />门店</router-link>
				</el-menu-item>
				<el-menu-item index="3" v-if="adminRole!=2">
					<router-link to="/classification"><img src="../assets/image/sortmanage.jpg" />分类管理</router-link>
				</el-menu-item>
				<el-menu-item index="4">
					<router-link to="/goodsManage"><img src="../assets/image/goodsmanage.jpg" />商品管理</router-link>
				</el-menu-item>
				<el-menu-item index="5">
					<router-link to="/orderManage"><img src="../assets/image/ordermanage.jpg" />订单管理</router-link>
				</el-menu-item>
				<!-- 门店---订单管理 -->
				<!-- <el-menu-item index="5" v-if="adminRole==2">
					<router-link to="/branchOrder"><img src="../assets/image/ordermanage.jpg" />订单管理</router-link>
				</el-menu-item> -->
				<el-menu-item index="6" >
					<router-link to="/saleManage"><img src="../assets/image/salasmanage.jpg"/>销售管理</router-link>
				</el-menu-item>
				<!-- 门店---销售管理 -->
				<!-- <el-menu-item index="6" v-if="adminRole==2">
					<router-link to="/branchSales"><img src="../assets/image/salasmanage.jpg"/>销售管理</router-link>
				</el-menu-item> -->
				<el-menu-item index="7" >
					<router-link to="/Feedback"><img src="../assets/image/feedback.jpg"/>意见反馈</router-link>
				</el-menu-item>
				<el-menu-item index="8">
					<router-link to="/commentManage"><img src="../assets/image/appraise.jpg" />评论管理</router-link>
				</el-menu-item>
			  </el-menu>
			  <div class="footer" @click="exitLogin">
				  <img src="../assets/image/quit.jpg"/>
				  <span>退出</span>
			  </div>
		  </el-aside>
		  <!-- 右侧 -->
		  <el-container>
			<!-- 上 -->
			<el-header>
				<div class="infoBox">
					<!-- 用户头像 -->
					<el-upload class="avatar-uploaders" action="#" :show-file-list="false" :limit="1" :auto-upload="false"
						:on-change="changeImg" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<el-icon class="el-icon-plus avatar-uploader-icon" v-else><Plus></Plus></el-icon>
					</el-upload>
					<!-- 登录角色 -->
					<span>{{roleName}}</span>
				</div>
			</el-header>
			<!-- 主体 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
	</div>
	<el-dialog title="确定要退出吗？" v-model="dialogVisible" width="30%"  center>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="exit">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</span>
	</el-dialog>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { useRouter } from 'vue-router';
	import {uploadPicture,updatePicture} from '../api/wqj/index'
	import { ElMessage } from 'element-plus';
	import {Plus} from '@element-plus/icons-vue'
	let router=useRouter()
	let dialogVisible=ref(false)//退出对话框弹出标志
	let adminRole=ref<string>('0')//判断身份，0和1总店，2分店
	let roleName=ref<string>('')//用户名称
	let adminId=ref<number>()//用户ID
	let userMsg=''
	let imageUrl=ref<string>("")//图片回显地址
	let newfile=ref<string>("")//接受file.raw
	let urlFile=ref<string>("")
	const baseUrl="http://192.168.16.199:8081/"
	// 点击确认退出登录
	const exitLogin=()=>{
		dialogVisible.value=true
	}
	const exit=()=>{
		sessionStorage.clear()
		router.push("/Login");
	}
	//添加头像
	const changeImg=async(file)=>{
	    console.log(file.raw)
	    newfile.value = file.raw;
		let res=await uploadPicture({
			file:newfile.value
		})
		if(res.code==200){
			resetPicture()
			imageUrl.value = baseUrl + res.msg;
			sessionStorage.setItem("iserIcon", res.msg);
			console.log("图片上传",imageUrl.value)
		}
	}
	// 更新头像
	const resetPicture=async()=>{
		let res=await updatePicture({
			file:newfile.value,
			adminId:Number(adminId.value)
		})
		console.log("修改头像",res)
	}
	
	//上传成功
	const handleAvatarSuccess = (res,file) => {
		// console.log(res);res包含接口地址
		// console.log(uploadFile)uploadFile图片回显
		//创建Url文件，让文件以图片的形式回显
		// imageUrl.value = URL.createObjectURL(file.raw)
		// console.log("上传成功",imageUrl.value)
	}
	//上传前
	const beforeAvatarUpload = (rawFile) => {
	  if (rawFile.type !== 'image/jpeg') {
	    ElMessage.error('Avatar picture must be JPG format!')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 2) {
	    ElMessage.error('Avatar picture size can not exceed 2MB!')
	    return false
	  }
	  return true
	}
	onMounted(()=>{
		userMsg=JSON.parse(sessionStorage.getItem('Msg'))
		adminRole.value=userMsg.adminRole//用户角色
		roleName.value=userMsg.adminName//用户名称 
		imageUrl.value=baseUrl+sessionStorage.getItem('iserIcon')//用户头像地址
		adminId.value=userMsg.adminId//用户ID
	})
</script>

<style scoped lang="less">
	.el-aside{
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url(../assets/image/leftbackground.jpg);
	}
	.Fmenu{
		width: 100%;
		margin-top:10% ;
		margin-bottom: 80%;
		background: none;
	}
	// 隐藏箭头
	:deep(.el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow ){
	  display: none;
	}
	:deep(.el-sub-menu){
		width: 100%;
		padding: 0;
	}
	:deep(.el-menu--inline .el-menu-item){
		width:100%;
		padding-left: 40px;
	}
	:deep(.Fmenu a){
		color: #7e7e7e;
		text-decoration:none;
		font-size: 17px;
		font-weight: 600;
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 20%;
		img{
			width: 20px;
			margin-right: 10%;
		}
	}
	.Fmenu a.router-link-active{
		// background-color: lightgrey;
		color: black;
	}
	.footer{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		font-weight: 600;
		cursor: pointer;
		img{
			width: 20px;
			margin-right: 5%;
		}
	}
	.infoBox{
		width: 100%;
		height: 10vh;
		display: flex;
		justify-content: end;
		align-items: center;
		box-sizing: border-box;
		padding-right: 2%;
		span{
			font-size: 17px;
			font-weight: 600;
		}
		
		.avatar-uploaders {
			width: 50px;
			height: 50px;
			line-height: 50px;
			margin: 0 10px;
			display: flex;
			border-radius: 50%;
			.avatar {
				width: 50px;
				height: 50px;
				display: block;
				border-radius: 50%;
			}
			.avatar-uploader-icon {
				font-size: 28px;
				color: #19559d;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
				// background-color: lightpink;
			}
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			border-radius: 100%;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
	}
	.dialog-footer{
		height: 15vh;
		display:flex;
		justify-content: center;
		align-items: end;
	}
	
</style>